<template>
  <div>
    <div class="search">
      <!-- 搜索框 -->
      <van-search
          v-model="value"
          show-action
          shape="round"
          background="gray"
          placeholder="请输入搜索关键词"
          @search="onSearch"
      >
        <template #action>
          <div @click="onSearch(value)">搜索</div>
        </template>
      </van-search>

      <!-- 历史搜索 -->
      <div>
        <p style="display: inline-block;margin: 25px">搜索历史</p>
        <van-icon name="delete-o" style="float: right;margin: 25px" @click="removeHistory()"/>
      </div>
      <div style="display: flex;flex-wrap: wrap">
        <van-tag v-for="(item, index) in historyList" :key="index" type="primary" size="large"
                 @click="onSearch(item)" style="margin: 0px 0px 25px 25px">
          {{ item }}
        </van-tag>
      </div>

      <!-- 底部导航条 -->
      <tabbar/>
    </div>
  </div>
</template>
<script scoped>
import Tabbar from "../components/Tabbar.vue";

export default {
  components: {Tabbar},
  data() {
    return {
      historyList: [],
      value: "",
    };
  },

  // 如果本地存储的数据有值就直接赋值给data中的historyList
  mounted() {
    this.listHistory();
  },

  methods: {
    listHistory() {
      this.http.get("/api/mfh/user/search/list").then((res) => {
        this.historyList = res.data.data;
      })
    },
    removeHistory() {
      this.http.get("/api/mfh/user/search/delete").then((res) => {
        this.historyList = [];
        this.$toast("清楚历史搜索成功");
      })


    },
    onSearch(name) {
      this.$router.push({
        path: '/searchResult', query: {
          name: name,
          active: "note"
        }
      });
    },
  },
};
</script>
<style scoped>
</style>
